<template>
  <div class="dashboard">

    <el-header height="80px">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple" style="text-align: left;">
            <h2 style="margin-left: 20px;">
              CC酒店客房信息管理系统v1.0
            </h2>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light" style="line-height: 80px;text-align: right;margin-right: 50px;">

            <div v-if="localStorage.getItem('users')">
              <span style="font-weight: bold;">{{ formattedDateTime }} </span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              当前用户：<span @click="showUser" style="color: #409EFF;cursor: pointer;">
                {{ userInfo.fullname }}</span>
              &nbsp;&nbsp;
              <el-button size="mini" type="primary" plain @click="LoginOut">退出登录</el-button>
            </div>

            <div v-else @click="gotoLogin" style="cursor: pointer;color: #409EFF;">立即前往登录页面</div>

          </div>
        </el-col>
      </el-row>

    </el-header>

    <div class="sidebar" :class="{ 'collapsed': isSidebarCollapsed }">
      <el-menu :default-active="activeMenu" @select="handleMenuSelect" :collapse="isSidebarCollapsed" router
        style="text-align: left;">
        <el-menu-item index="/index">
          <template slot="title">
            <i class="el-icon-s-promotion"></i>
            <span>首页</span>
          </template>
        </el-menu-item>
      </el-menu>
      <el-menu :default-active="activeMenu" @select="handleMenuSelect" :collapse="isSidebarCollapsed" router
        style="text-align: left;">
        <el-menu-item index="/views">
          <template slot="title">
            <i class="el-icon-s-marketing"></i>
            <span>数据统计</span>
          </template>
        </el-menu-item>
      </el-menu>
      <el-menu :default-active="activeMenu" @select="handleMenuSelect" :collapse="isSidebarCollapsed" router
        style="text-align: left;height: 85%">
        <el-submenu index="dashboard">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>客房信息管理</span>
          </template>
          <el-menu-item index="/users">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>1. 用户信息管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/rooms">
            <template slot="title">
              <i class="el-icon-message-solid"></i>
              <span>2. 房间信息管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/registration">
            <template slot="title">
              <i class="el-icon-s-marketing"></i>
              <span>3. 入住登记管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/order">
            <template slot="title">
              <i class="el-icon-s-goods"></i>
              <span>4. 订单信息管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/roomstatus">
            <template slot="title">
              <i class="el-icon-s-release"></i>
              <span>5. 房间状态管理</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

    <div class="main-content">

      <!-- 编辑弹窗 -->
      <el-dialog title="修改个人信息" :visible="isEditDialogVisible" :scrollable="false" @close="resetEditDialog" width="800px">
        <el-form ref="editForm" :model="editForm" label-width="80px" style="padding: 0px 50px;">
          <el-form-item label="账号">
            <el-input v-model="editForm.account" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="密码" required>
            <el-input v-model="editForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item label="姓名" required>
            <el-input v-model="editForm.fullname"></el-input>
          </el-form-item>
          <el-form-item label="性别" required>
            <el-select v-model="editForm.sex" placeholder="请选择" style="width: 100%;">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
              <el-option label="保密" value="保密"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="角色" required>
            <el-select v-model="editForm.role" placeholder="请选择" style="width: 100%;" :disabled="true">
              <el-option label="超级管理员" value="超级管理员"></el-option>
              <el-option label="管理员" value="管理员"></el-option>
              <el-option label="普通用户" value="普通用户"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码" required>
            <el-input v-model="editForm.phone" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="editForm.email"></el-input>
          </el-form-item>
          <el-form-item label="状态" required>
            <el-select v-model="editForm.status" placeholder="请选择" style="width: 100%;" :disabled="true">
              <el-option label="启用" value="启用"></el-option>
              <el-option label="禁用" value="禁用"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="editForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="resetEditDialog">取消</el-button>
          <el-button type="primary" @click="handleEdit">提交</el-button>
        </div>
      </el-dialog>


      <router-view></router-view>
    </div>

  </div>
</template>

<script>

import axios from 'axios';

export default {
  data() {
    return {
      isSidebarCollapsed: false,
      isEditDialogVisible: false,
      formattedDateTime: '',
      localStorage: window.localStorage,
      activeMenu: '',
      userInfo: [],
      editForm: {
        account: '',
        password: '',
        fullname: '',
        sex: '',
        role: '',
        phone: '',
        email: '',
        status: '',
        remark: '',
      },
    };
  },
  created() {
    this.updateTime(); // 初始化时间
    setInterval(this.updateTime, 1000); // 每秒钟更新一次时间
  },
  mounted() {
    this.getUsers();
  },

  methods: {
    toggleSidebarCollapse() {
      this.isSidebarCollapsed = !this.isSidebarCollapsed;
    },
    handleMenuSelect(index) {
      if (index.startsWith('/')) {
        // 如果菜单项的索引以斜杠开头，表示是一个内嵌页面的路由路径
        if (this.$route.path !== index) {
          this.$router.push(index);
        }
      } else {
        // 否则，将索引设置为 activeMenu，用于标记当前选中的菜单项
        this.activeMenu = index;
      }
    },
    showUser() {
      this.isEditDialogVisible = true
    },

    //获取用户信息
    getUsers() {
      const user = localStorage.getItem('users');
      this.LoginUser = user;

      this.$axios.get("http://localhost:8888/users/get").then(res => {
        this.res = res.data; // 将获取到的用户数据赋值给resinfo
        for (let i = 0; i < this.res.length; i++) {
          if (this.res[i].account === user) {
            this.userInfo = this.res[i];
            break;
          }
        }
        this.editForm = this.userInfo;
      })
        .catch(error => {
          console.log(error);
        })
    },
    gotoLogin() {
      this.$router.push("/")
    },
    LoginOut() {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.clear();
        this.$message({
          message: '退出登录成功！',
          type: 'success'
        });
        this.$router.push("/");
      }).catch(() => {

      });
    },
    showEditDialog(row) {
      console.log(this.userInfo);
      this.isEditDialogVisible = true; // 显示编辑弹窗
    },

    resetEditDialog() {
      this.isEditDialogVisible = false;
    },
    handleEdit() {
      if (!this.editForm.account || !this.editForm.password || !this.editForm.fullname || !this.editForm.role || !this.editForm.sex || !this.editForm.phone || !this.editForm.status
      ) {
        this.$message({
          type: 'error',
          message: '必填项不能为空！'
        });
        return false;
      }
      else if (!/^1[3456789]\d{9}$/.test(this.editForm.phone)) {
        this.$message({
          type: 'error',
          message: '请输入正确的手机号！'
        });
        return false;
      }
      else if (this.editForm.email && !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.editForm.email)) {
        this.$message({
          type: 'error',
          message: '请输入正确的邮箱！'
        });
        return false;
      }
      axios
        .put(`http://localhost:8888/users/update/${this.editForm.id}`, this.editForm)
        .then(response => {
          this.$message({
            type: 'success',
            message: '修改成功！'
          });
          this.resetEditDialog();
        })
        .catch(error => {
          // 处理请求错误
          console.error(error);
        });
    },
    updateTime() {
      const date = new Date();
      const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' };
      const formattedDateTime = date.toLocaleString(undefined, options);
      this.formattedDateTime = formattedDateTime;
    }

  },
};
</script>

<style scoped>
.dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.sidebar {
  flex: 1;
  width: 200px;
  height: 100%;
  margin-top: 20px;
  height: 100vh;
}

.sidebar.collapsed {
  width: 60px;
}

.el-header {
  color: #333;
  z-index: 9;
  line-height: 40px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.main-content {
  flex: 1;
  padding: 20px;
  margin-left: 200px;
  position: absolute;
  top: 80px;
  width: calc(100vw - 280px);
}
</style>
